<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>御码-用户注册</title>
  <link rel="stylesheet" href="./css/base.css">
  <link rel="stylesheet" href="./css/register.css">
</head>
<body>
    <div class="topNav">
       <div class="wrapper">
           <ul>
              <li><a href="./login.html">登录</a></li>
              <li class="line"></li>
              <li><a href="./regidter.html">免费注册</a></li>
              <li class="line"></li>
              <li><a href="javascropt:;">我的订单</a></li>
              <li class="line"></li>
              <li><a href="javascropt:;">会员中心</a></li>
              <li class="line"></li>
              <li><a href="javascropt:;">帮助中心</a></li>
              <li class="line"></li>
              <li><a href="javascropt:;">在线客服</a></li>
              <li class="line"></li>
              <li><a href="javascropt:;">手机版</a></li>
           </ul>
       </div>
    </div>
    <!-- 新用户注册 -->
    <div class="userregist">
       <div class="wrapper">
           <div class="title"><h1>注册新用户</h1></div>
           <form>
              <div class="public username">
                 <input type="text" placeholder="设置用户名">
                 <div class="mesg"></div>
              </div>
              <div class="public phone">
                <input type="text" placeholder="设置手机号">
                <div class="mesg"></div>
              </div>
              <div class="public code">
                <input type="text" placeholder="短信验证码" disabled>
                <a href="javascript:;">发送验证码</a>
                <div class="mesg"></div>
              </div>
              <div class="public password">
                <input type="password" placeholder="设置6至20位字母,数字和符号组合">
                <div class="mesg"></div>
              </div>
              <div class="public confirm">
                <input type="password" placeholder="再次输入以上密码">
                <div class="mesg"></div>
              </div>
              <div class="aggred">
                 <input type="checkbox">已阅读并同意 <span>《用户服务协议》</span>
              </div>
              <div class="btn">
                  <input type="submit" value="下一步"> 
              </div>
           </form>
       </div>
    </div>
    <script>
         var userAry = [];
         var username = document.querySelector(".username input");
         username.addEventListener("blur", checkUsername);
         // 功能1:验证用户名是否合法
         function checkUsername() {
             var reg = /^\w{6}$/;
             var v = username.value;
             if(!reg.test(v)) {
               username.nextElementSibling.innerHTML = "用户名必须是6位";
               username.nextElementSibling.style.color = "red";
                 return false;
             }else {
               username.nextElementSibling.innerHTML = "";
                 return true;
             }
         }

         var phone= document.querySelector(".phone input");
         phone.addEventListener("blur", checkPhone);
         // 功能2: 验证手机号:
         function checkPhone() {
             var reg = /^13[0-9](\d){8}|15[0-9](\d){8}$/;
             var v = phone.value;
             if(!reg.test(v)) {
               phone.nextElementSibling.innerHTML = "手机号必须是13或者15开头";
               phone.nextElementSibling.style.color = "red";
                 return false;
             }else {
               phone.nextElementSibling.innerHTML = "";
                return true;
             }

         }

         // 功能5: 验证验证码
         var code_num = document.querySelector(".code input");
         code_num.addEventListener("blur", checkCode)
         function checkCode() {
             var reg = /^\d{6}$/;
             var v = code_num.value;
             if(!reg.test(v)) {
               code_num.nextElementSibling.nextElementSibling.innerHTML = "请输入6位数字";
               code_num.nextElementSibling.nextElementSibling.style.color = "red";
                 return false;
             }else {
               code_num.nextElementSibling.nextElementSibling.innerHTML = "";
                 return true;
             }
         }

         // 功能4: 点击发送验证码
         var code = document.querySelector(".code a");
         var i = 5;
         var flg = true;
         var timeID;
         code.addEventListener("click", function(){
               if(flg) {
                  code.innerHTML= "05秒后重新获取";
                  flg = false;
                  timeID = setInterval(function(){
                     i--;
                     if(i == 0) {
                        code.innerHTML = `重新获取`;
                        flg = true;
                        i = 5;
                        code_num.disabled = false;
                        clearInterval(timeID);
                     }else {
                        code.innerHTML = `0${i}秒后重新获取`;
                     }
                     code.style.color = "#27BA9B";
                  }, 1000)
               }
         });


         // 功能6: 验证密码
         var password = document.querySelector(".password input");
         password.addEventListener("blur", checkpwd);
         function checkpwd() {
            var reg = /^\w{6,20}$/;
            var v = password.value;
            if(!reg.test(v)) {
               password.nextElementSibling.innerHTML = "请输入6-20位密码";
               password.nextElementSibling.style.color = "red";
               return false;
            }else {
               password.nextElementSibling.innerHTML = "";
               return true;
            }
         }


         // 功能7: 确认密码
         var confirm = document.querySelector(".confirm input");
         confirm.addEventListener("blur", checkConf);
         function checkConf() {
             var  v = confirm.value;
             if(v == password.value) {
               confirm.nextElementSibling.innerHTML = "";
                 return true;
             }else {
               confirm.nextElementSibling.innerHTML = "两次密码输入不一致";
               confirm.value = "";
               confirm.nextElementSibling.style.color = "red";
                 return false;
             }
         }
         
         // 功能8: 点击下一步
         var btn= document.querySelector(".btn");
         var aggred = document.querySelector(".aggred input");
         btn.addEventListener("click", function(e){
             e.preventDefault();
             if(!aggred.checked) {
                 alert('请选择同意');
                 return;
             }
             // 验证是否全部通过
             if(checkUsername() && checkPhone() && checkCode() && checkpwd() && checkConf()) {
                  // 注册信息 userAry
                  var user = {
                      uname:username.value,
                      phone:phone.value,
                      password:password.value
                  }

                  // 检测当前账户是否存在,如果存在,则提示存在,重新注册,否则提示注册成功
                  var res = JSON.parse(localStorage.getItem("userInfo")) || [];

                  var flg =  res.some(function(item){
                      return  item.phone == user.phone;
                  });

                  if(flg) {
                      alert("当前手机号已被注册请重新填写信息");
                      document.querySelector("form").reset();
                  }else {
                      userAry.push(user);
                      localStorage.setItem("userInfo", JSON.stringify(userAry));
                      alert("注册成功,页面跳转中..");
                      document.querySelector("form").reset();
                      location.href = "./login.html";
                  }
                  
             }else {
                 return;
             }
         });
   </script>
</body>
</html>